

<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>日常管理</el-breadcrumb-item>
      <el-breadcrumb-item>会议管理</el-breadcrumb-item>
      <el-breadcrumb-item><b>会议预约管理</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索框 -->
  <div style="margin:40px 20px 20px 20px">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item label="会议室名" prop="cname">
        <el-input v-model="searchFormModel.cname" placeholder="请输入会议室名称" clearable />
      </el-form-item>
      <el-form-item label="部门" prop="applyDept">
        <el-input v-model="searchFormModel.applyDept" placeholder="请选择申请部门" clearable />
      </el-form-item>
      <el-form-item label="计划时间" prop="startDt">
        <el-input v-model="searchFormModel.startDt" placeholder="请输入选择计划开始时间" clearable />
      </el-form-item>
      <el-form-item label="预约状态" prop="reserveStatus">
        <el-input v-model="searchFormModel.reserveStatus" placeholder="请选择预约状态" clearable />
      </el-form-item>
      <el-form-item label="申请人" prop="applyMan">
        <el-input v-model="searchFormModel.applyMan" placeholder="请输入申请人" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchOnSubmit">
          <el-icon><Search /></el-icon>&nbsp;查询
        </el-button>
      </el-form-item>
    </el-form>
  </div>
  <!--  表格-->
  <div style="margin:20px">
    <el-table :data="reserveInfo" stripe border style="width: 100%">
      <el-table-column prop="id" label="序号" v-if="false"/>
      <el-table-column prop="applyDept" label="申请部门"/>
      <el-table-column prop="meeting" label="会议题目"  />
      <el-table-column prop="cname" label="会议室名"/>
      <el-table-column prop="chamberNo" label="会议号"/>
      <el-table-column prop="startDt" label="计划开始时间"  />
      <el-table-column prop="endDt" label="计划结束时间" />
      <el-table-column prop="contestant" label="参与人数" />
      <el-table-column prop="chamberType" label="会议类型" style="width: 60px" />
      <el-table-column prop="applyMan" label="申请人" />
      <el-table-column prop="note" label="备注"  style="width: 60px"/>
      <el-table-column prop="reserveStatus" label="预约状态" style="width: 60px" />
      <el-table-column label="操作" width="250">
        <template #default="scope">
          <el-button
              size="small"
              type="success"
              :disabled="scope.row.reserveStatus === '同意' || scope.row.reserveStatus === '拒绝'"
              @click="tableEditHandler(scope.$index, scope.row)">
            <el-icon><Bell /></el-icon>&nbsp;同意
          </el-button>
          <el-button
              size="small"
              type="danger"
              :disabled="scope.row.reserveStatus === '同意'|| scope.row.reserveStatus === '拒绝' "
              @click="RejectReserve(scope.$index, scope.row)">
            <el-icon><Bell /></el-icon>&nbsp;拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,8]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

</template>
<script setup>

import {ArrowRight, Bell, Delete, Edit, MagicStick, Plus, Search} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import request from "../../../utils/daily";
import {ElMessage} from "element-plus";
onMounted(()=>{
  getReserveInfo();
})
//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const reserveInfo=ref([]);
//搜索
const searchFormRef=ref();
const searchFormModel=reactive({
  cname:'',
  applyDept:'',
  startDt:'',
  reserveStatus:'',
  applyMan:''
})
const  getReserveInfo=()=>{
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含其他参数
  };
  if (searchFormModel.cname && searchFormModel.cname.trim() !== ''){
    params.cname=searchFormModel.cname.trim();
  }
  if (searchFormModel.applyDept && searchFormModel.applyDept.trim() !== ''){
    params.applyDept=searchFormModel.applyDept.trim();
  }
  if (searchFormModel.startDt && searchFormModel.startDt.trim() !== ''){
    params.startDt=searchFormModel.startDt.trim();
  }
  if (searchFormModel.reserveStatus && searchFormModel.reserveStatus.trim() !== ''){
    params.reserveStatus=searchFormModel.reserveStatus.trim();
  }
  if (searchFormModel.applyMan && searchFormModel.applyMan.trim() !== ''){
    params.applyMan=searchFormModel.applyMan.trim();
  }
  request({
    url:'/chamber/reserve/page',
    method:'get',
    params,
  }).then((req)=>{
    if (200==req.data.errorCode){
      reserveInfo.value=req.data.data.records;
      totals.value=req.data.data.total;
    }
  })
}
const searchOnSubmit=()=>{
  getReserveInfo();
}
const handleSizeChange = (val) => {
  pageSize.value=val;
  getReserveInfo();
}
const handleCurrentChange = (val) => {
  currentPage.value=val;
  getReserveInfo();
}

///////////////////////////////////预约状态
const formEditData = {
  id:'',
  reserveStatus:''
}
// 编辑表单绑定数据模型
const formEdit = reactive({...formEditData})
const tableEditHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)
  formEdit.id=rowData.id;

  request({
    url: '/chamber/reserve/approve',
    method: 'put',
    data: JSON.stringify(formEdit),
    headers: {'content-type': "application/json;charset=UTF-8"}
  }).then(response => {
    if (response.data.errorCode == 200) {
      getReserveInfo();
    }
  })
}
const RejectReserve = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)
  formEdit.id=rowData.id;

  request({
    url: '/chamber/reserve/reject',
    method: 'put',
    data: JSON.stringify(formEdit),
    headers: {'content-type': "application/json;charset=UTF-8"}
  }).then(response => {
    if (response.data.errorCode == 200) {
      getReserveInfo();
    }
  })
}

</script>
<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page{
  margin-left: 30%;
}
</style>